<template>
  <div class="app-container">
    <el-drawer
      :title="row.name"
      :visible.sync="drawer"
      direction="rtl"
      size="75%"
      :before-close="handleClose"
    >
      <div class="cont">
        <div class="flex">
          <p>
            会员状态：<span v-if="userInfo.vipTime">
              <span class="green" v-if="userInfo.vipTime > new Date().getTime()"
                >有效</span
              >
              <span class="orange" v-else>已到期</span>
            </span>
            <span class="red" v-else>未购买</span>
          </p>
          <p>用户ID：{{ userInfo.id }}</p>
          <p>会员到期时间：{{ parseTime(userInfo.vipTime) || "--" }}</p>
        </div>
        <div class="tabs">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="会员详情" name="first" />
            <el-tab-pane label="会员使用记录" name="second" />
          </el-tabs>
        </div>
        <template v-if="activeName == 'first'">
          <div class="tit">基础信息</div>
          <div class="flex_info">
            <div class="flex_box">
              <p class="text">头像：</p>
              <img :src="userInfo.avatar" class="avatar" alt="" />
            </div>
            <div class="flex_box">
              <p class="text">用户ID：</p>
              <p class="value">{{ userInfo.id }}</p>
            </div>
            <div class="flex_box">
              <p class="text">微信UID：</p>
              <p class="value">{{ userInfo.wxUnionId }}</p>
            </div>
            <div class="flex_box">
              <p class="text">昵称：</p>
              <p class="value">{{ userInfo.name }}</p>
            </div>
            <div class="flex_box">
              <p class="text">手机号：</p>
              <p class="value">{{ userInfo.mobile }}</p>
            </div>
            <div class="flex_box">
              <p class="text">注册时间：</p>
              <p class="value">{{ parseTime(userInfo.createTime) }}</p>
            </div>
            <div class="flex_box">
              <p class="text">性别：</p>
              <p class="value">{{ userInfo.gender == 1 ? "女" : "男" }}</p>
            </div>
            <div class="flex_box">
              <p class="text">生日：</p>
              <p class="value">{{ parseTime(userInfo.birthday) }}</p>
            </div>
          </div>
          <div class="tit">会员状态</div>
          <div class="vip_status">
            <div class="text_box">
              <div class="flex_box">
                <p class="text">会员状态：</p>
                <p class="value">
                  <span v-if="userInfo.vipTime">
                    <span
                      class="green"
                      v-if="userInfo.vipTime > new Date().getTime()"
                      >有效</span
                    >
                    <span class="orange" v-else>已到期</span>
                  </span>
                  <span class="red" v-else>未购买</span>
                </p>
              </div>
              <div class="flex_box">
                <p class="text">会员到期时间：</p>
                <p class="value">{{ parseTime(userInfo.vipTime) || "--" }}</p>
              </div>
            </div>
            <div class="text_box">
              <div class="flex_box">
                <p class="text">初次购买时间：</p>
                <p class="value">
                  {{ parseTime(userInfo.firstBuyTime) || "--" }}
                </p>
              </div>
              <div class="flex_box">
                <p class="text">最近购买时间：</p>
                <p class="value">
                  {{ parseTime(userInfo.lastBuyTime) || "--" }}
                </p>
              </div>
            </div>
          </div>
        </template>
        <template v-if="activeName == 'second'">
          <el-form
            v-show="showSearch"
            ref="queryForm"
            :model="queryParams"
            size="small"
            :inline="true"
          >
            <el-form-item label="名称" prop="search">
              <el-input
                v-model="queryParams.search"
                placeholder="通过订单号、门店进行模糊搜索"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="核销时间" prop="signTime">
              <el-date-picker
                v-model="queryParams.signTime"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleQuery"
                >查询</el-button
              >
              <el-button
                icon="el-icon-refresh"
                class="delBtn"
                @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
          <el-table
            ref="table"
            :key="tableKey"
            v-loading="loading"
            :data="roleList"
            style="margin-top: 20px"
          >
            <el-table-column
              v-if="columns[0].visible"
              key="code"
              label="订单号"
              prop="code"
              :show-overflow-tooltip="true"
              align="left"
            />
            <el-table-column
              v-if="columns[1].visible"
              key="name"
              label="核销方式"
              prop="name"
              :show-overflow-tooltip="true"
              align="left"
            >
              <template slot-scope="scope">
                <div class="statusBox">
                  <div v-if="scope.row.useType == 1" class="open">二维码</div>
                  <div v-else>会员码</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              v-if="columns[2].visible"
              key="shopName"
              label="核销门店"
              prop="shopName"
              :show-overflow-tooltip="true"
              align="left"
            />
            <el-table-column
              v-if="columns[3].visible"
              key="createTime"
              label="核销时间"
              align="left"
              prop="createTime"
            >
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.current"
            :limit.sync="queryParams.size"
            @pagination="getListData"
          />
        </template>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getUserUseList } from "@/api/index";
import { getInfo } from "@/api/login";
export default {
  name: "Drawer",
  props: {
    row: {
      type: Object,
      default: {},
    },
    drawer: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      uploadUrl: process.env.VUE_APP_BASE_API + "/admin/batchShopUser",
      fileList: [],
      open: false,
      activeName: "first",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      columns: [
        { key: 0, label: `订单号`, visible: true },
        { key: 1, label: `核销方式`, visible: true },
        { key: 2, label: `核销门店`, visible: true },
        { key: 3, label: `核销时间`, visible: true },
      ],
      tableKey: 0,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 10,
      // 角色表格数据
      roleList: [],
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        search: "",
        signTime: "",
      },
      userInfo: "",
    };
  },
  watch: {
    drawer: {
      handler(val) {
        if (val) {
          this.resetForm("queryForm");
          this.queryParams.current = 1;
          this.roleList = [];
          this.getUserInfo();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  methods: {
    handleClick(tab, event) {
      this.resetQuery();
      this.tableKey += 1;
    },
    getUserInfo() {
      getInfo({ userId: this.row.id }).then((res) => {
        this.userInfo = res.data;
        if (res.data.vipTime) {
          this.getListData();
        }
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.current = 1;
      this.handleQuery();
    },
    getListData() {
      const data = {
        ...this.queryParams,
        startTime:
          this.queryParams.signTime &&
          new Date(this.queryParams.signTime[0]).getTime(),
        endTime:
          this.queryParams.signTime &&
          new Date(this.queryParams.signTime[1]).getTime(),
        userId: this.row.id,
        type: 2,
      };
      delete data.signTime;
      getUserUseList(data).then((response) => {
        this.roleList = response.data.records;
        this.total = response.data.total || 0;
        this.loading = false;
      });
    },
    handleClose() {
      this.$emit("handleClose");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$nextTick(() => {
        this.queryParams.current = 1;
        this.getListData();
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.current = 1;
      this.handleQuery();
    },
  },
};
</script>
<style lang="scss" scoped>
.green {
  color: green;
}
.red {
  color: red;
}
.orange {
  color: orange;
}
.vip_status {
  width: 70%;
  border: 1px solid #333;
  padding: 20px;
  .text_box {
    display: flex;
    justify-content: space-between;
    .flex_box .text {
      width: 140px;
    }
  }
}
.tit {
  font-size: 20px;
  color: #333;
  font-weight: bold;
  margin-bottom: 20px;
}
.flex_info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 20px;
  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }
}
.flex_box {
  display: flex;
  gap: 10px;
  align-items: center;
  .text {
    font-size: 16px;
    color: #606266;
    width: 100px;
    text-align: right;
  }
  .value {
    font-size: 16px;
    color: #606266;
  }
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.w-100 {
  width: 100%;
}
.cont {
  padding: 0 20px;
}
.app-container {
  ::v-deep.el-drawer__header {
    color: #000;
    font-size: 20px;
    font-weight: bold;
  }
}
.flex {
  display: flex;
  gap: 20px;
  color: #333;
  font-size: 16px;
}
</style>
